<template>
    <n-drawer :show="active" :width="width" @update:show="(flag:boolean) => (active = flag)">
        <n-drawer-content  :native-scrollbar="false" title="车损违章扣费统计" closable>
            <n-space vertical :size="32">
                <n-result status="418" title="暂未开放" description="此功能正在开发"></n-result>
            </n-space>
            <template #footer>
                <n-space justify="end">
                    <n-button type="tertiary" @click="() => (active = false)">
                        <template #icon>
                            <n-icon :component="CloseRound" />
                        </template>
                        关闭
                    </n-button>
                </n-space>
            </template>
        </n-drawer-content>
    </n-drawer>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import { CloseRound } from '@vicons/material'
import { useStore } from '@/store'
const store = useStore()
const width = computed(() => Math.max(store.state.browser.innerWidth * 0.4, 960))

const prop = defineProps({
    show: {
        type: Boolean,
        required: true,
    },
    item: {
        type: Object,
        required: true,
    },
})

const labelStyle = {
    width: '150px',
}

const emit = defineEmits(['update:show'])

const active = computed({
    get: () => prop.show,
    set: val => emit('update:show', val),
})
</script>
